<template>
    <div>
        <van-row>
            <van-col span="10">
                <van-search v-model="valueCity" placeholder="请选择期望工作城市" readonly @focus="showCityPopup"/>
            </van-col>
            <van-col span="10">
                <van-search v-model="valueWorkType" placeholder="请选择工种" readonly @click="showWorkTypePopup"/>
            </van-col>
            <van-col span="4">
                <van-button type="primary" size="large" @click="searchWorker">搜索</van-button>
            </van-col>
        </van-row>
        <div class="content" id="workList" @scroll="initScorell($event)">
            <van-panel v-for="item in list" v-bind:key="item._id" :title="item.name +' - '+item.sex "
                       :desc="item.province+'-'+item.city+'-'+item.area":status="item.isRealName==0?'未实名':'已实名'">
                <div style="padding:0em 1em;">
                    <van-tag mark type="primary">工种：</van-tag>
                    <van-tag v-for="t in item.workType" :type="radomTag()" style="margin-left:1em;">{{t}}</van-tag>
                    <br/>
                    <van-tag mark type="danger">期望工作城市：</van-tag>
                    <van-tag v-for="t in item.expectCities" plain :type="radomTag()" style="margin-left:1em;">{{t}}
                    </van-tag>
                </div>
                <div slot="footer" style="text-align:right;">
                    <van-button size="small" type="primary" @click="phone(item.phone)">
                        <van-icon name="phone"/>
                        电话联系
                    </van-button>
                </div>
            </van-panel>
        </div>
        <van-popup v-model="showCity" position="bottom" :close-on-click-overlay="false">
            <van-picker ref="findWorkerProvinces" :show-toolbar="true" @confirm="confirm" @cancel="cancelCity"
                        :columns="provinces"
                        @change="onProvinceChange"/>
        </van-popup>
        <van-popup v-model="showWorkType" position="bottom" :close-on-click-overlay="false">
            <van-picker ref="findWorkerWorkType" :show-toolbar="true" @confirm="confirmWorkType"
                        @cancel="cancelWorkType"
                        :columns="workType"/>
        </van-popup>
    </div>

</template>
<script>
    import http from '../common/http';
    import {Button, List, Cell, Panel, Icon, Tag, Row, Col, Picker, Search, Popup} from 'vant';

    export default {
        components: {
            [Button.name]: Button,
            [Icon.name]: Icon,
            [List.name]: List,
            [Cell.name]: Cell,
            [Panel.name]: Panel,
            [Row.name]: Row,
            [Col.name]: Col,
            [Picker.name]: Picker,
            [Search.name]: Search,
            [Popup.name]: Popup,
            [Tag.name]: Tag
        },
        data() {
            return {
                list: [],
                disabled: false,
                page: 1,
                rows: 10,
                valueProvince: '',
                valueCity: '',
                valueWorkType: '',
                showCity: false,
                showWorkType: false,
                provinces: [
                    {
                        values: [],
                        className: 'column1'
                    },
                    {
                        values: [],
                        className: 'column2',
                        defaultIndex: 2
                    }
                ],
                workType: [],
                isShowCityFirst: true,
                isShowWorkTypeFirst: true,
                provincesData: null,
                searchType: 1,
                maxPage: 1,

            };
        },
        created() {
            this.$parent.title = '找工人';
            this.$parent.isTabbar = true;
            this.$parent.active = 1;
            this.loadConfigData();
            this.loadMore();
        },

        methods: {
            //加载显示数据
            loadConfigData() {
                let _id = localStorage.getItem('_id');
                let token = localStorage.getItem('token');
                let obj = {
                    _id: _id ? _id : http._id,
                    token: token ? token : http.token,
                };
                http.getUserJsonData(`/user/job/get`, obj, (data) => {
                    this.provincesData = data.provinces;
                    this.workType = data.workType;
                });
            },
            radomTag() {
                let arr = ['primary', 'danger', 'success'];
                let rad = Math.floor(Math.random() * 3);
                return arr[rad];
            },
            phone(p) {
                window.location.href = `tel:${p}`;
            },
            loadMore() {
                if (this.maxPage < this.page) return;
                this.disabled = true;
                let _id = localStorage.getItem('_id');
                let token = localStorage.getItem('token');
                let findObj = {
                    _id: _id ? _id : http._id,
                    token: token ? token : http.token,
                    name: '',
                    workType: this.valueWorkType,
                    province: this.valueProvince,
                    city: this.valueCity,
                    area: '',
                    page: this.page,
                    rows: this.rows,
                };
                http.postJsonData(`/public/worker/list`, findObj, (data) => {
                    console.log(data);
                    this.maxPage = Math.floor(data.totalCnt / this.rows);
                    if (this.searchType == 1) {
                        for (let i = 0; i < data.workers.length; i++) {
                            this.list.push(data.workers[i]);
                        }
                    } else if (this.searchType == 2) {
                        this.searchType = 1;
                        this.list = data.workers;
                    }
                    this.disabled = false;
                });
            },
            //滚动条
            initScorell(event) {
                let scrollTop = document.getElementById('workList').scrollTop;
                let scrollHeight = document.getElementById('workList').scrollHeight;
                let offsetHeight = document.getElementById('workList').offsetHeight;
                if (scrollTop + offsetHeight == scrollHeight) {
                    this.loadMore();
                }
            },
            showCityPopup() {
                this.showCity = true;
                if (!this.isShowCityFirst) return;
                this.isShowCityFirst = false;
                setTimeout(() => {
                    this.$refs.findWorkerProvinces.setColumnValues(0, Object.keys(this.provincesData));
                    this.$refs.findWorkerProvinces.setColumnValue(0, '湖南');
                    this.$refs.findWorkerProvinces.setColumnValues(1, Object.keys(this.provincesData['湖南']));
                    this.$refs.findWorkerProvinces.setColumnValue(1, '湘潭');
                }, 100);

            },
            showWorkTypePopup() {
                this.showWorkType = true;
                if (!this.isShowWorkTypeFirst) return;
                this.isShowWorkTypeFirst = false;
                setTimeout(() => {
                    this.$refs.findWorkerWorkType.setColumnValues(0, this.workType);
                    this.$refs.findWorkerWorkType.setColumnValue(0, this.workType[2]);
                }, 100)
            },
            //选择期望工作城市点击确认
            confirm(data) {
                this.showCity = false;
                this.valueCity = data[1];
                this.valueProvince = data[0];
            },
            //选择工种点击确认
            confirmWorkType(data) {
                this.showWorkType = false;
                this.valueWorkType = data;
            },
            //点击取消
            cancelCity() {
                this.showCity = false;
                this.valueCity = '';
                this.valueProvince = '';
            },
            cancelWorkType() {
                this.showWorkType = false;
                this.valueWorkType = '';
            },
            onProvinceChange(picker, values, index) {
                if (index == 0) {
                    picker.setColumnValues(1, Object.keys(this.provincesData[values[0]]));
                }
            },
            searchWorker() {
                this.searchType = 2;
                this.page = 1;
                this.maxPage = 1;
                this.loadMore();
            },
        }
    }
</script>
<style>
    .content {
        width: 100%;
        height: 78%;
        position: absolute;
        overflow: auto;
    }
</style>
